 <!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap 
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
	<link href="css/bootstr_extend.css" rel="stylesheet" media="screen">
    
    -->
    <link rel="stylesheet/less" type="text/css" href="myless/bootstrap.less" />

	<script src="myless/less.js" type="text/javascript"></script>
    <link href="mycss/mystyle.css" rel="stylesheet" media="screen">
     

  </head>
  <body>
    
	<!-- Template  -->
	<div class="snippet_code">
		<h3>Template Snippets</h3>
		<span class="label label-info" >Label</span>
	</div>
	<hr>
	
	<!-- Responsive Images  -->
	
	<div class="snippet_code">
		<h3>Responsive Images</h3>
		<span class="label label-info" >IMG</span>
		<hr>
		<img  src="images/chameleon.jpg" class="img-responsive img-thumbnail" alt="Reponsive image" width="250">
	</div>
	<hr>
	
	<!-- Grid Layouts  -->

	<div class="snippet_code">	
	<h3>Grid Layouts</h3>
		<span class="label label-info">grid</span>
		<div class="container ">
			<div class="row">
				<div class="col-lg-6">1 of 2</div>
				<div class="col-lg-6">2 of 2</div>
			</div>
			<div class="row">
				<div class="col-lg-5">1 of 2</div>
				<div class="col-lg-5 col-offset-2">2 of 2</div>
			</div>
			<div class="row">
				<div class="col-lg-3 col-sm-6">1 of 4</div>
				<div class="col-lg-3 col-sm-6">2 of 4</div>
				<div class="col-lg-3 col-sm-6">3 of 4</div>
				<div class="col-lg-3 col-sm-6">4 od 4</div>
			</div>
			<div class="row">
				<div class="col-lg-2 col-sm-5 ">1 of 6</div>
				<div class="col-lg-2 col-sm-5 col-12 pull-right">2 of 6</div>
				<div class="col-lg-2 col-sm-3 col-6">3 of 6</div>
				<div class="col-lg-2 col-sm-3 col-6">4 od 6</div>
				<div class="col-lg-2 col-sm-3 col-6">5 of 4</div>
				<div class="col-lg-2 col-sm-3 col-6">6 of 6</div>

			</div>
		</div>
		
	</div>
	<hr>

	
	<!-- Typography -->

	<div class="snippet_code">
		<h3>Typography</h3>
		<span class="label label-info" >Label</span>
		<p class="lead">Lead Paragraph: Twitter Bootstrap is Cool</p>
		<p>Normal Paragraph: Twitter Bootstrap is Cool</p>
		<p class="text-muted">Muted: Twitter Bootstrap is Cool</p>
		<p class="text-primary">Primary: Twitter Bootstrap is Cool</p>
		<p class="text-warning">Warning: Twitter Bootstrap is Cool</p>
		<p class="text-danger">Danger: Twitter Bootstrap is Cool</p>
		<p class="text-success">Success: Twitter Bootstrap is Cool</p>
		<p class="text-info">Info: Twitter Bootstrap is Cool</p>
		<span>strong</span>
		<span>strong</span>
		<span>emphasized</span>
	</div>
	<hr>
	
	
	<!-- Navigation  -->
	<div class="snippet_code">
		<h3>Navigation - Responsive NavBar</h3>
		<span class="label label-info" >Label</span>
		
		<div class="navbar">
			<div class="container">

			<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
			  <span class="icon-bar"></span>
			  <span class="icon-bar"></span>
			  <span class="icon-bar"></span>
			</button>

			<!-- Be sure to leave the brand out there if you want it shown -->
			<a class="navbar-brand" href="#">Title</a>

			<!-- Place everything within .navbar-collapse to hide it until above 768px -->
				<div class="nav-collapse collapse navbar-responsive-collapse">
				  
				  <ul class="nav nav-pills nav-justified">
							<li><a href="#">Automotive</a></li>
							<li><a href="#">B2B</a></li>
							<li><a href="#" >Biz Op</a></li>
							<li><a href="#">Consumer Prod</a></li>
							<li class="to-hide"><a href="#">Coupons/Freebies</a></li>
					</ul>
				  
				</div><!-- /.nav-collapse -->
			</div><!-- /.container -->
		</div><!-- /.navbar -->
		
		
	</div>
	<hr>
	
	
    <!-- JavaScript plugins (requires jQuery) -->
    <script src="http://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Optionally enable responsive features in IE8 -->
    <script src="js/respond.js"></script>
  </body>
</html>